<template>
    <el-dialog title="产品信息" append-to-body :visible="visible" width="800px" @close="onClose" @open="onOpen" >
        <div class="box">
            <el-form ref="form" :rules="rules" :model="form" label-width="120px" label-position="right" hide-required-asterisk>
                <el-row>
                    <el-col :span="12">
                    <el-form-item label="强度等级" prop="strengthGrade">
                        <span slot="label" style="color: #ff0000">强度等级</span>
                        <el-select v-model="form.strengthGrade" value-key="id" multiple placeholder="请选择">
                        <el-checkbox class="place" @change="selectAll($event,'strengthGrade')">全选</el-checkbox>
                        <el-option v-for="item in strengthGradeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    </el-col>
                    <el-col :span="12">
                    <el-form-item label="性能等级" prop="performanceRate">
                        <span slot="label" style="color: #ff0000">性能等级</span>
                        <el-select v-model="form.performanceRate" value-key="id" multiple placeholder="请选择">
                        <el-checkbox class="place" @change="selectAll($event,'performanceRate')">全选</el-checkbox>
                        <el-option v-for="item in performanceRateList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                    <el-form-item label="材料要求" prop="materialRequirements">
                        <span slot="label" style="color: #ff0000">材料要求</span>
                        <el-select v-model="form.materialRequirements" value-key="id" multiple placeholder="请选择">
                        <el-checkbox class="place" @change="selectAll($event,'materialRequirements')">全选</el-checkbox>
                        <el-option v-for="item in materialRequirementsList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    </el-col>
                    <el-col :span="12">
                    <el-form-item label="特殊要求" prop="specialRequirements">
                        <span slot="label" style="color: #ff0000">特殊要求</span>
                        <el-select v-model="form.specialRequirements" value-key="id" multiple placeholder="请选择">
                        <el-checkbox class="place" @change="selectAll($event,'specialRequirements')">全选</el-checkbox>
                        <el-option v-for="item in specialRequirementsList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                    <el-form-item label="其他要求" prop="otherRequirements">
                        <span slot="label" style="color: #ff0000">其他要求</span>
                        <el-select v-model="form.otherRequirements" value-key="id" multiple placeholder="请选择">
                        <el-checkbox class="place" @change="selectAll($event,'otherRequirements')">全选</el-checkbox>
                        <el-option v-for="item in otherRequirementsList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    </el-col>
                    <el-col :span="12">
                    <el-form-item label="外加剂要求" prop="admixtureRequirements">
                        <span slot="label" style="color: #ff0000">外加剂要求</span>
                        <el-select v-model="form.admixtureRequirements" value-key="id" multiple placeholder="请选择">
                        <el-checkbox class="place" @change="selectAll($event,'admixtureRequirements')">全选</el-checkbox>
                        <el-option v-for="item in admixtureRequirementsList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                    <el-form-item label="浇筑方式" prop="pumpType">
                        <span slot="label" style="color: #ff0000">浇筑方式</span>
                        <el-select v-model="form.pumpType" value-key="id" multiple placeholder="请选择" >
                        <el-checkbox class="place" @change="selectAll($event,'pumpType')">全选</el-checkbox>
                        <el-option v-for="item in pumpTypeList" :key="item.id" :label="item.itemName" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    </el-col>
                    <el-col :span="12">
                    <el-form-item label="小方量约定" prop="smallVolume">
                        <span slot="label" style="color: #ff0000">小方量约定</span>
                        <el-input v-model="form.smallVolume" type="number" style="width: 215px;" maxlength="16">
                        <template slot="append">方/车</template>
                        </el-input>
                    </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                    <el-form-item label="约定容重" prop="unitWeight">
                        <span slot="label" style="color: #ff0000">约定容重</span>
                        <el-input v-model="form.unitWeight" style="width: 215px;" maxlength="16"></el-input>
                    </el-form-item>
                    </el-col>
                    <el-col :span="12">
                    <el-form-item label="甲供材料" prop="armorForMaterials">
                        <span slot="label" style="color: #ff0000">甲供材料</span>
                        <el-radio-group v-model="form.armorForMaterials">
                        <el-radio :label="0">无</el-radio>
                        <el-radio :label="1">有</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <div v-if="form.armorForMaterials==1">
                <div style="padding-bottom: 10px;">
                <el-button size="mini" class="bottom_all" style="margin-left: 0;" @click="addItem()">
                    <i class="icon iconfont iconicon_button_add" style="font-size: 12px;"></i>
                    添加
                </el-button>
                </div>
                <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe :data="tableData" tooltip-effect="dark">
                <el-table-column label="甲供材料名称" align="center" width="210">
                    <template slot-scope="scope">
                    <span v-if="scope.row.materials" style="cursor: pointer; color: #00a754;" @click="selectMaterials(scope.$index)">{{scope.row.materials}}</span>
                    <span v-else style="cursor: pointer; color: #00a754;" @click="selectMaterials(scope.$index)">选择</span>
                    </template>
                </el-table-column>
                <el-table-column label="型号" align="center" prop="specification" width="210"></el-table-column>
                <el-table-column label="单方掺量" align="center" width="210">
                    <template slot-scope="scope">
                        <el-input-number v-model="scope.row.mixingAmount" :precision="0" style="width: 100%;" :controls="false"></el-input-number>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" prop="specification" width="110">
                    <template slot-scope="scope">
                    <el-button size="mini" class="bottom_two" @click="deleteItem(scope.$index)">
                        <i class="icon iconfont iconicon_button_delete" style="font-size: 12px;"></i>
                        删除
                    </el-button>
                    </template>
                </el-table-column>
                </el-table>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button class="bottom_all_two" @click="onClose">取 消</el-button>
            <el-button class="bottom_all" type="primary" @click="onConfirm">确 定</el-button>
        </span>

        <SelectMaterials :visible.sync="selectMaterialsVisible" :config="selectMaterialsConfig" @updated="updateTableData" />
    </el-dialog>
</template>

<script>
    import { getDisClostProduct, updateDisClostProduct } from '@/api/internetSales/performanceRecord'
    import { getLists } from "@/api/smart/schedul/c.js";
    import { getDicType } from "@/api/common.js";
    import SelectMaterials from '@/views/platform/ICPS/internetSales/components/SelectMaterials'

    export default {
        components: {
            SelectMaterials
        },
        data() {
            return {
                form: {
                    strengthGrade: [],
                    performanceRate: [],
                    materialRequirements: [],
                    specialRequirements: [],
                    otherRequirements: [],
                    admixtureRequirements: [],
                    pumpType: [],
                    smallVolume: '',
                    unitWeight: '',
                    armorForMaterials: null
                },
                rules: {
                    strengthGrade: [{ required: true, message: '请选择' }],
                    performanceRate: [{ required: true, message: '请选择' }],
                    materialRequirements: [{ required: true, message: '请选择' }],
                    specialRequirements: [{ required: true, message: '请选择' }],
                    otherRequirements: [{ required: true, message: '请选择' }],
                    admixtureRequirements: [{ required: true, message: '请选择' }],
                    pumpType: [{ required: true, message: '请选择' }],
                    smallVolume: [{ required: true, message: '请输入' }],
                    unitWeight: [{ required: true, message: '请输入' }],
                    armorForMaterials: [{ required: true, message: '请选择' }],
                },
                strengthGradeList: [], // 强度等级
                performanceRateList: [], // 性能等级
                materialRequirementsList: [], // 材料要求
                specialRequirementsList: [], // 特殊要求
                admixtureRequirementsList: [], // 外加剂要求
                otherRequirementsList: [], // 其他要求
                pumpTypeList: [], // 浇筑类型
                tableData: [], // 表格数据
                // 选择物料
                selectMaterialsVisible: false,
                selectMaterialsConfig: {},
                index: '', // 当前选择表格索引
            };
        },
        props: {
            config: {
                type: Object,
                default: () => {},
            },
            // 控制dialog显示
            visible: {
                type: Boolean,
            },
        },
        methods: {
            // 全选
            selectAll(e, type) {
                const listStr = type + 'List';
                this.form[type] =  e ? this[listStr].map(item => item.id) : []
            },
            // 更新表格数据
            updateTableData(data) {
                this.tableData[this.index] = {
                    materialsId: data.id,
                    materials: data.name,
                    specification: data.specification,
                    mixingAmount: 0
                }
            },
            // 选择物料
            selectMaterials(index) {
                this.index = index;
                this.selectMaterialsVisible = true;
                this.selectMaterialsConfig = {};
            },
            // 添加一条表格数据
            addItem() {
                this.tableData.push(
                    {
                        materialsId: '',
                        materials: '',
                        specification: '',
                        mixingAmount: ''
                    }
                )
            },
            // 删除一条表格数据
            deleteItem(i) {
                this.tableData.splice(i, 1)
            },
            onOpen() {
                // 获取下拉列表数据
                getLists().then((res) => {
                    res.data.forEach((item) => {
                        if (!item) return
                        if (item.typeName == "强度等级") {
                            this.strengthGradeList = item.list;
                        } else if (item.typeName == "规范性能等级") {
                            this.performanceRateList = item.list;
                        } else if (item.typeName == "材料要求") {
                            this.materialRequirementsList = item.list;
                        } else if (item.typeName == "特殊要求") {
                            this.specialRequirementsList = item.list;
                        } else if (item.typeName == "外加剂要求") {
                            this.admixtureRequirementsList = item.list;
                        } else if (item.typeName == "其他要求") {
                            this.otherRequirementsList = item.list;
                        }
                    });
                });
                // 获取浇筑方式泵机类型
                getDicType({ code: "castingType" }).then((res) => {
                    res.data.items.map((v1) => v1.type = 1);
                    this.pumpTypeList = res.data.items
                    getDicType({ code: "pouringMethod" }).then((res) => {
                        res.data.items.map((v2) => v2.type = 2)
                        this.pumpTypeList = [...this.pumpTypeList, ...res.data.items];
                    });
                });
                // 获取产品信息
                getDisClostProduct({id: this.config.discloseId}).then(res => { 
                    if(res.code === 1001) {
                        const arr = [
                            'strengthGrade', 
                            'performanceRate', 
                            'materialRequirements', 
                            'specialRequirements', 
                            'admixtureRequirements', 
                            'otherRequirements', 
                            'pumpType',
                        ]
                        arr.forEach(item => {
                            if(res.data[item] && JSON.parse(res.data[item])?.length) {
                                this.form[item] = JSON.parse(res.data[item]).map(item=> item.id)
                            } else {
                                this.form[item] = []
                            }
                        })
                        this.form.smallVolume = res.data.smallVolume;
                        this.form.unitWeight = res.data.unitWeight;
                        this.form.armorForMaterials = res.data.armorForMaterials;
                        this.tableData = res.data.list || [];
                    }
                    
                });
            },
            onClose() {
                this.$emit('update:visible', false);
            },
            onConfirm() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        const arr = [
                            'strengthGrade', 
                            'performanceRate', 
                            'materialRequirements', 
                            'specialRequirements', 
                            'admixtureRequirements', 
                            'otherRequirements', 
                            'pumpType',
                        ];
                        const formData = {};
                        arr.forEach(item=>{ formData[item] = [] })
                        for(let i = 0; i<arr.length; i++) {
                            for(let j = 0; j < this[arr[i]+'List'].length; j++) {
                                for(let k = 0; k < this.form[arr[i]].length; k++) {
                                    if(this[arr[i]+'List'][j].id === this.form[arr[i]][k]) {
                                        formData[arr[i]].push(this[arr[i]+'List'][j])
                                    }
                                }
                            }
                        }
                        formData.pumpType =  formData.pumpType.map(item => (
                            { 
                                id: item.id,
                                name: item.itemName,
                                type: item.type
                            }
                        ))
                        arr.forEach(item=>{
                            formData[item] = JSON.stringify(formData[item])
                        })
                        const params = {
                            id: this.config.discloseId,
                            armorForMaterials: this.form.armorForMaterials,
                            smallVolume: this.form.smallVolume,
                            unitWeight: this.form.unitWeight,
                            ...formData,
                            list: this.tableData.filter(item=>!!item.materialsId) || []
                        }
                        updateDisClostProduct(params).then(res=>{
                            res.code === 1001 ? this.$message.success('保存成功') : this.$message.warning('保存失败');
                            this.$emit('updated', false);
                            this.$emit('update:visible', false);
                        })
                    }
                });
            },

        },
    };
</script>

<style lang="scss" scoped>
.box {
    max-height: 500px;
    overflow-y: auto;
}
.place {
    padding-left:10px;
    height:34px;
    line-height:34px;
}

.add {
    color: #00b85c;
    cursor: pointer;
}
.delete {
    color: red;
    cursor: pointer;
}
</style>
